<template>
  <div class="container">
    <div class="header">
      <van-nav-bar
        title="商品详情"
        left-text="返回"
        right-text
        left-arrow
        fixed
        @click-left="onClickLeft"
      />
    </div>
    <div class="content">
      <div class="banner">
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(image, index) in initData.productImages" :key="index">
            <img :src="image.imageUrl">
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="title">{{initData.product_name}}</div>
      <div class="price">￥{{initData.price}}/{{initData.product_detail_group_name}}</div>
      <div class="detail">
        <div>
          <div class="detailText">详情</div>
          <div class="introduce" v-if="initData.greens_type==0">{{initData.introduction||"暂无详情"}}</div>
          <ul v-else>
            <li v-for="(item,index) in initData.greens_group" :key="index">
              <div class="left">
                {{item}}
                <span>(1份)</span>
              </div>
              <!-- <div class="right">￥68.00</div> -->
            </li>
          </ul>
        </div>
      </div>
      <div class="prompt">
        <div>
          <div class="promptText">温馨提示</div>
          <div class="card">
            <div>有效期：</div>
            <div>2018.12.12至20192.28（周末、法定节假日通用）,10:00-22:00使用</div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="left">
          <span>￥{{Number(initData.price).toFixed(2)}}</span>
        </div>
        <!-- <div class='left' @click.stop="showPop('add')">
                <img src="../../assets/images/shoppingCar.png" alt="">
                <span>加入购物车</span>
        </div>-->
        <div class="right" @click.stop="showPop('buy')">立即抢购</div>
      </div>
    </div>

    <van-popup v-model="show" position="bottom">
      <div class="popContent">
        <div class="date" @click="showDatePop">
          <div class="left">使用日期</div>
          <div class="center">{{formData.selectDate}}</div>
          <div class="right">
            <van-icon name="arrow"/>
          </div>
        </div>
        <div class="selectNum">
          <div class="left">选择数量</div>
          <div class="right">
            <img src="../../assets/images/reduce2.png" alt @click="reduceNum">
            <span>{{formData.goodsNum}}</span>
            <img src="../../assets/images/add2.png" alt @click="addNum">
          </div>
        </div>
        <div class="btn" v-if="buyType=='add'" @click="addShoppingCarMethod">加入购物车</div>
        <div class="btn" v-if="buyType=='buy'" @click="payMethod">去支付</div>
      </div>
    </van-popup>
    <van-popup v-model="showTime" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        @cancel="cancelMethod"
        @confirm="confirmMethod"
      />
    </van-popup>
  </div>
</template>
<script>
import Vue from "vue";
import { Lazyload } from "vant";
Vue.use(Lazyload);
export default {
  name: "goodsDetail",
  data() {
    return {
      images: ["https://img.yzcdn.cn/1.jpg", "https://img.yzcdn.cn/2.jpg"],
      show: false,
      showTime: false,
      currentDate: new Date(),
      buyType: "",
      formData: {
        selectDate: "请选择日期",
        goodsNum: 1,
        catering_Id: ""
      },
      shopingCarData: [],
      initData: {},
      isLoading: false,
      orderId: ""
    };
  },
  mounted() {
    if (localStorage.getItem("shoppingCarData")) {
      this.shopingCarData = localStorage.getItem("shoppingCarData");
    }
    this.getInitData();
  },
  methods: {
    //返回
    onClickLeft() {
      this.$router.back();
    },
    //加入购物车
    addShoppingCarMethod() {
      if (this.formData.selectDate == "请选择日期") {
        this.$toast("请选择使用日期");
        return false;
      }
      this.shopingCarData.push(this.formData);
      localStorage.setItem("shoppingCarData", this.shopingCarData);
      this.$toast("加入购物车成功");
      this.show = false;
    },
    //支付
    async payMethod() {
      if (this.formData.selectDate == "请选择日期") {
        this.$toast("请选择使用日期");
        return false;
      }
      var token = this.$cookies.get("token")||localStorage.getItem('token');
      let u = navigator.userAgent;
      let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      let message = {
        orderId: this.orderId,
        formData: this.formData
      };
      if (!token) {
        if (isAndroid) {
          console.warn("ecologylogin");
        } else if (isiOS) {
          window.webkit.messageHandlers.goBackLogin.postMessage(null);
        }
      }

      let params = {
        catering_Id: this.$route.query.catering_Id,
        quantity: this.formData.goodsNum
      };
      const res = await this.$axios.post(this.$api.submitOrder, params);
      if (res.success) {
        this.orderId = res.data;
        let u = navigator.userAgent;
        let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        let message = {
          orderId: this.orderId,
          formData: this.formData
        };

        if (isAndroid) {
          console.warn("pay:" + this.orderId);
        } else if (isiOS) {
          window.webkit.messageHandlers.toPayMethod.postMessage(message);
        }
      } else {
        this.initData = {};
        this.$toast(res.msg);
      }
    },
    //加数字
    addNum() {
      this.formData.goodsNum++;
    },
    //减数字
    reduceNum() {
      if (this.formData.goodsNum > 1) {
        this.formData.goodsNum--;
      }
    },
    //时间选择器点确定
    confirmMethod() {
      this.formData.selectDate = this.$vuefilter.formatDate(
        this.currentDate,
        "yyyy-MM-dd"
      );
      this.showTime = false;
    },
    //关闭时间弹窗
    cancelMethod() {
      this.showTime = false;
    },
    //显示时间弹窗
    showDatePop() {
      this.showTime = true;
    },
    //显示支付弹窗
    showPop(type) {
      this.show = true;
      this.buyType = type;
      this.formData.catering_Id = this.$route.query.catering_Id;
    },
    //初始化页面
    async getInitData() {
      let params = {
        catering_Id: this.$route.query.catering_Id
      };
      const res = await this.$axios.post(this.$api.goodsDetails, params);
      if (res.success) {
        this.initData = res.data;
        if (this.initData.greens_group) {
          this.initData.greens_group = this.initData.greens_group.split(",");
        }
        this.isLoading = false;
      } else {
        this.initData = {};
        this.$toast(res.msg);
      }
    }
  }
};
</script>
<style  scoped>
img {
  width: 100% !important;
}
.container {
  padding-top: 0.46rem;
  padding-bottom: 0.8rem;
}
.banner {
  padding: 0.15rem;
}
.van-swipe {
  border-radius: 8px;
  box-shadow: 0 3px 18px 0px rgba(0, 0, 0, 0.6);
}
.title {
  padding: 0 0.15rem;
  font-size: 0.16rem;
  color: #333333;
  margin-top: 0.1rem;
}
.price {
  padding: 0 0.15rem;
  font-size: 0.16rem;
  color: #f44736;
  margin-top: 0.15rem;
}
.detail {
  margin-top: 0.15rem;
  padding: 0 0.15rem;
}
.detail > div {
  background: #fff;
  border-radius: 8px;
  padding: 0.1rem 0.15rem;
  font-size: 0.15rem;
  color: #333333;
}
.detail .detailText {
  border-bottom: 1px solid #f7f7f7;
  padding-bottom: 0.06rem;
}
.detail ul {
  padding-top: 0.05rem;
}
.detail ul li {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  height: 0.23rem;
}
.detail ul li span {
  font-size: 0.12rem;
  color: #808080;
}
.prompt {
  margin-top: 0.15rem;
  padding: 0 0.15rem;
}
.prompt > div {
  background: #fff;
  border-radius: 8px;
  padding: 0.1rem 0.15rem;
  font-size: 0.15rem;
  color: #333333;
}
.prompt .promptText {
  border-bottom: 1px solid #f7f7f7;
  padding-bottom: 0.06rem;
}
.prompt .card {
  padding-top: 0.05rem;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.6rem;
  background: #fff;
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.footer > div {
  width: 50%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
}
.footer img {
  width: 0.18rem;
}
.footer .left span {
  padding-left: 0.1rem;
  color: #00bf47;
  font-size: 0.16rem;
}
.footer .right {
  background: #00bf47;
  height: 100%;
  color: #fff;
  font-size: 0.16rem;
}
.popContent {
  height: 2.5rem;
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}
.popContent .date {
  width: 80%;
  height: 0.5rem;
  background: #f2f2f2;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.15rem;
  border-radius: 0.05rem;
}
.popContent .selectNum {
  width: 80%;
  height: 0.5rem;
  background: #f2f2f2;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.15rem;
  border-radius: 0.05rem;
}
.popContent .selectNum .right {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  align-items: center;
}
.popContent .selectNum .right img {
  width: 0.18rem;
}
.popContent .selectNum .right span {
  padding: 0 0.2rem;
}
.popContent .btn {
  width: 80%;
  height: 0.5rem;
  border-radius: 0.5rem;
  background: #00bf46;
  color: #fff;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}
</style>




